<!DOCTYPE html> <!-- html文档版本（html4 html5,现在这个样子的表示这个文档按照html5解析它）-->
<html lang="en"> <!-- html标签（也叫元素）的开始-->


<head><!-- head标签表示文档的头部开始，标签（也叫元素）的开始-->
    <mate charset="UTF-8">  <!-- mate标签制定了编码的格式是 utf-8 -->
        <mate name="viewport" content="width=device-width, initial-scale=1.0">
            <mate http-equiv="x-UA-Compatible" conent="ie=edge">
                <title>第一个页面</title><!-- title表示html文档的标题-->
            </mate>
        </mate>
    </mate>

</head><!-- /head标签表示文档的头部的结束，标签（也叫做元素）的结束-->
<body>
    <!-- body标签表示文档的主体，这是注释，不会在浏览器显示-->
    
    <p>
        <b>第一个问题：什么是前端开发？<br>
        前端开发是将UI（网页或app界面设计师）设计的用户界面，<br>
        通过html,css,javascript,以及它们衍生出来的技术，编<br>
        程实现用户界面交互的工作。最初前端只包括PC(个人电脑)<br>
        端的开发，后来随着移动互联网，智能手机的发展，范围变<br>
        得更广了。因此它现在还包括移动设备端的开发<br>
        （各种app,例如微信app等等）</b>
    </p>

    <h1><!--定义HTML标签-->
        <i>一级标题</i><!--定义斜体-->
    </h1>
    <h2>
        <mark>二级标题</mark><!--定义带有记号的文本-->
    </h2>
    <h3>
        三级标题
    </h3>
    <h4>
        四级标题
    </h4>
    <h5>
        五级标题
    </h5>
    <h6>
        <u>六级标题</u>
    </h6>

    <a href="https://www.runoob.com/tags/ref-byfunc.html">访问HTML标签</a><!--定义一个链接-->

    <nav><!--定义导航链接-->
        <a href="https://www.runoob.com/html/html-tutorial.html">HTML</a>
        <a href="https://www.runoob.com/css/css-tutorial.html">CSS</a>
        <a href="https://www.runoob.com/js/js-tutorial.html">javascript</a>
    </nav>
    
    <ul><!--有序列表-->
        <li>HTML</li><!--定义一个列表项-->
        <li>CSS</li>
        <li>JS</li>
    </ul>
    <ol><!--无序列表-->
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>

    <dl><!--定义一个描述列表-->
        <dt>HTML</dt><!--定义一个定义列表中的项目-->
        <dd>是用于描述web页面的一种语言</dd><!--定义定义列表中项目的描述-->
        <dt>CSS</dt>
        <dd>定义如何显示HTML元素</dd>
    </dl>

    <abbr title="Sun Zi Qing">SZQ</abbr><br><!--定义一个缩写-->

    <bdo dir="ltr">文字从走到右显示</bdo><!--覆盖文本原来方向，属性dir(ltr和rtl)规定文本方向--><br>
    <bdo dir="rtl">文字从右到左显示</bdo>

    <p>my favorite color is<del>blue</del><!--定义被替换或删除的文本--><ins>red</ins><!--定义被插入的文本--></p>

    <meter value="2" low="0" high="10"></meter><!--定义度量衡。仅用于已知最大和最小值的度量，不能作为一个进度条使用-->
    <meter value="0.6"></meter>

    <progress value="22" max="100"></progress><!--定义运行中的任务进度，不适合用来表示度量衡-->

    <pre>授人以鱼  不如
        <u>授人以渔</u></pre><!--定义预格式文本-->

    <p>WWF's goal is to: 
        <q>Build a future where people live in harmony with nature.</q><!--定义短的引用-->
    We hope they succeed.</p>

    <p>Here is a quote from WWF's website:</p>
    <blockquote cite="。。。。。"><!--规定引用的来源-->
    For 50 years, WWF has been protecting the future of nature. The world leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
    </blockquote><!--定义一个摘自另一个源的块引用-->

    <hr><!--定义水平线-->

    <ruby><!--定义ruby注释（中文注音或字符-->
        孙<rp>(</rp><!--定义不支持ruby元素的浏览器所显示的内容--><rt>sun</rt><!--定义字符（中文注音或字符）的解释或发音--><rp>)</rp>
    </ruby>

    <p><s>不正确的文本</s><!--定义加删除线的文本--></p>

    <p><small>小号文本</small><!--定义小号的文本--></p>

    <p>H<sub>2</sub>O<!--定义下标文本--></p>
    <p>O<sup>2</sub><!--定义上标文本--></p>

    <p>每天早上<time>9:00</time><!--定义一个时间-->上班</p>

    <p>学习 AJAX，你必须熟悉 <wbr>Http<wbr><!--规定在文本中的何处适合添加换行符-->Request 对象</p>

    <form ><!--定义一个HTML表单，用于用户输入-->
        <fieldset><!--定义围绕表单中元素的边框-->
        <legend>注册表单</legend><!--定义fieldset元素的标题-->
        <label >用户名</label><!--定义input元素的标注-->
        <input type="text"  value="请输入用户名"><br>
        <label >密码</label>
        <input type="text" value="请输入密码"><br>
        <label >电子邮箱</label>
        <input type="text" value="请输入电子邮件"><br>
        <label >号码</label>
        <input type="text" value="请输入电话号码"><br>
        <input type="submit" value="注册"><!--定义一个输入控件-->
        <button type="button" >注册</button><!--定义按钮-->
    </fieldset>
    </form>

    <textarea rows="10" clos="30">我是一个多行文本输入框</textarea><!--定义一个多行的文本输入控件-->

    <select><!--定义选择列表（下拉列表）-->
        <optgroup label="前端"><!--定义选择列表中相关选项的组合-->
          <option value="HTML">HTML</option><!--定义选择列表中的选项-->
          <option value="CSS">CSS</option>
        </optgroup>
        <optgroup label="后端">
          <option value="JAVA">JAVA</option>
          <option value="C++">C++</option>
        </optgroup>
    </select><br>
    

    <a>恩</a>
    <strong>恩</strong>
    <em>恩</em>
    <span style="display:block; background:pink; height:100px; width:100px">恩</span>
    <strog>恩</strog>
    <lable>恩</lable>

    <p style="background:pink; height:100px; width:100px">恩</p>
    <div>恩</div>
    <h1>恩</h1>
    <h2>恩</h2>
    <h3>恩</h3>
      
    <table border="1"><!--定义一个表格-->
        <colgroup><!--定义列表中供格式化的列组-->
            <col style="background-color: pink;"><!--定义表格中一列或多个列的属性值-->
            <col style="background:blueviolet">
        </colgroup>
        <caption>软件开发</caption><!--定义表格标题-->
        <thead><!--定义表格中的表头内容-->
        <tr><!--定义表格中的行-->
            <th>前端</th><!--定义表格中的表头单元格-->
            <th>后端</th>
        </tr>
        </thead>
        <tbody><!--定义表格中的主体内容-->
        <tr>
            <td>html</td><!--定义表格中的单元-->
            <td>java</td>
        </tr>
        <tr>
            <td>css</td>
            <td>c++</td>
        </tr>
        </tbody>
        <tfoot><!--定义表格中的脚注-->
            <td>...</td>
            <td>...</td>
        </tfoot>
    </table>

    <article><!--定义一个文章的内容-->
        <header><!--定义一个文档的头部部分-->
            <h1>标题</h1>
            <p>内容</p>
        </header>
        <footer><!--定义一个文档的底部-->
            <p>恩</p>
        </footer>
    </article>

    <details><!--定义了用户可见的或者隐藏的需求的补充细节-->
        <summary>恩</summary><!--定义一个可见的标题，当用户点击标题时会显示出详细信息-->
        <p>......</p>
    </details>
        
      

    <table border="1" width="300">
        <tr>
            <th colspan="2">sss</th>
            <th>yyy</th>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </table>


    <table border="1" width="300" cellspacing="0" cellpadding="10">
        <tr>
            <th>sss</th>
            <td align="right">...</td>
        </tr>
        <tr>
            <th rowspan="2">sss</th>
            <td align="right">...</td>
        </tr>
        <tr>
            <td align="right">...</td>
        </tr>
        <tr>
            <th rowspan="2">sss</th>
            <td align="right">...</td>
        </tr>
        <tr>
            <td align="right">...</td>
        </tr>
        <tr>
            <th>sss</th>
            <td align="right">...</td>
        </tr>
    </table>

    <p style="border-style:dashed;border-color:#ff0000; border-radius:50%; width:100px; height:100px;"></p> /* 100px 50%取宽度和高度一半则会变成一个圆形 */
    <p style="border-style:solid;border-color:#ff0000; border-radius:10px 40px; width:100px; height:100px;"></p> /* 左上角和右下角是10px,右上角左下角40 对角线 */
    <p style="border-style:double;border-color:#ff0000; border-radius:10px 40px 80px; width:100px; height:100px;"></p> /* 左上角10  右上角左下角40  右下角80 */
    <p style="border-style:dotted;border-color:#ff0000; border-radius:10px 40px 80px 100px; width:100px; height:100px;"></p> /* 左上角10 右上角40 右下角80 左下角100 */ 

    <div style="width:430px;height:220px;border:1px solid black;background: pink;">
        <div style="margin:0 auto;background: purple;text-align:center;width: 220px;height: 110px; border-color:pink;border-width:3px;border-style:solid double dotted outset;margin:0 auto;line-height:70px;">
        <p>例子</p>
    </div>
    </div>

    <div style="width:430px;height:220px;border:1px solid black;background: pink;">
         <div style="margin:0 auto;background: purple;text-align:center;width: 220px;height: 110px; padding:20px 40px; border-color:pink;border-width:3px;border-style:solid double dotted outset;margin:0 auto;line-height:70px;">
        <p>例子</p>
    </div>
    </div>

    <div style="width:430px;height:220px;border:1px solid black;background: pink;">
        <div style="margin:0 auto;background: purple;text-align:center;width: 220px;height: 110px; padding:20px 40px 20px; border-color:pink;border-width:3px;border-style:solid double dotted outset;margin:0 auto;line-height:70px;">
       <p>例子</p>
   </div>
   </div>

   <div style="width:430px;height:220px;border:1px solid black;background: pink;">
        <div style="margin:0 auto;background: purple;text-align:center;width: 220px;height: 110px; padding:20px 40px 20px 40px; border-color:pink;border-width:3px;border-style:solid double dotted outset;margin:0 auto;line-height:70px;">
        <p>例子</p>
   </div>
   </div>
    

   



     




    





    


    



    

    




    








































































</body>

</html><!-- 斜杠（/）表示这个标签在这里就结束了-->